<template>
	<div class="h-11 bg-bg-8 px-3 flex items-center app-bg-react text-sm" @click="open = !open">
		<base-image
			v-if="data.regionId"
			:src="data.icon"
			type="server"
			default="sports/nation-default"
			class="h-[22px] mr-1" />
		<div class="ml-2 text-t-1 app-font-bold">{{ data.regionName }}</div>
		<div class="mx-1 text-t-2">{{ data.leagues.length }}</div>
		<base-icon
			name="down1"
			class="text-sm text-t-2 duration-300"
			:class="{
				'rotate-180': open
			}"></base-icon>
	</div>
	<transition @enter="onEnter" @leave="onLeave">
		<div v-show="open" class="">
			<div
				v-for="item in data.leagues"
				:key="item.leagueId"
				class="pl-[46px] py-2 text-sm"
				:class="item.eventsCount > 0 ? 'text-t-1 app-bg-react' : 'text-t-3'"
				@click="onSelect(item)">
				{{ item.shortName || item.leagueName }}
			</div>
		</div>
	</transition>
</template>

<script lang="ts" setup>
import { BaseImage, BaseIcon } from '@/components/base'
import { LeagueType, RegionType } from '@/types'
import { PropType, ref } from 'vue'
import gsap from 'gsap'

defineProps({
	data: {
		type: Object as PropType<RegionType>,
		required: true
	}
})

const emits = defineEmits(['select'])

const onSelect = (item: LeagueType) => {
	if (item.eventsCount > 0) {
		emits('select', item.leagueId)
	}
}

const open = ref(false)

let clientHeight = 0

const onEnter = (el: any, done: any) => {
	if (!clientHeight) {
		clientHeight = el.clientHeight
		gsap.from(el, {
			height: 0,
			opacity: 0,
			duration: 0.3,
			onComplete: done
		})
	} else {
		gsap.to(el, {
			height: clientHeight,
			opacity: 1,
			duration: 0.3,
			onComplete: done
		})
	}
}

const onLeave = (el: any, done: any) => {
	gsap.to(el, {
		height: 0,
		opacity: 0,
		duration: 0.3,
		onComplete: done
	})
}
</script>
